<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>场景秀</title>
    <meta name="viewport" content="width=device-width,initial-scalable=1,user-scalable=no">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="container">
        <img src="images/fish.png" class="big-fish">
        <img src="images/text.png" class="text">
        <img src="images/ice.png" class="ice">
        <div class="water"></div>
        <img src="images/first-fish.png" class="first-fish">
        <img src="images/second-fish.png" class="second-fish">
        <img src="images/bubble.png" class="bubble">
        <img src="images/weixin.png" class="weixin">
        <div class="sound" onclick="music()"> </div>
		<!--<img src="figure/img3/sound.png"/class="sound">-->
		<audio src="figure/img3/music.mp3" id="live" loop preload="preload">
			你的浏览器支不支持你html5，换上火狐吧！
		</audio>							
		</div>
    </div>
</body>
<script type="text/javascript">
			var audio = document.getElementById('live')
			var sound = document.getElementsByClassName('sound')[0]
			function music(){
            //判断音频是否正在播放,
           //audio.paused获取值二情况 1:true ,暂停2:false 播放
           if(audio.paused==true){
           	sound.style.backgroundImage = "url(images/muted.png)";
           	audio.play();
           }
           
           else{
           //否则,暂停
           sound.style.backgroundImage = "url(images/sound.png)";
           audio.pause();
           }          
			}
		</script>
</html>